[4주차 기본/심화/생각 과제] 🍁 로그인/회원가입 #4
Conversation
|
울 다은이 머싯당용가리~ |
| width: 23rem; | ||
| height: 25rem; | ||
| background-color: var(--color-bg); | ||
| border-radius: 1rem; | ||
| display: inline-block; | ||
| flex-direction: column; | ||
| box-shadow: 12px 15px 63px -1px rgba(0,0,0,0.81); | ||
| -webkit-box-shadow: 12px 15px 63px -1px rgba(0,0,0,0.81); | ||
| -moz-box-shadow: 12px 15px 63px -1px rgba(0,0,0,0.81); | ||
| `; |
There was a problem hiding this comment.
p4) shadow까지 넣어주고 세심하게 신경쓴게 보인다!! good~!
| }).then((response) => { | ||
| setUsername(response.data.username); | ||
| setNickname(response.data.nickname); | ||
| console.log("✨🔥성공🔥✨"); | ||
|
|
There was a problem hiding this comment.
p4) then을 사용한 이유가 궁금해! try 에서는 성공하면 바로 변수에 담아서 set함수 사용가능하지 않나??
There was a problem hiding this comment.
get이 성공한 경우에만 set하도록 저렇게 적었어요!..흠 then을 사용하지 않으면 get에 성공한 값을 어떻게 불러올 수 있나요,,??
| let inputID = document.querySelector(".id-input").value; | ||
|
|
There was a problem hiding this comment.
p3) 혹시 이부분은 왜 querySelector를 사용한건지 궁금해! id value를 가져올 땐 지금 상태관리를 하고 있어서 username으로도 사용가능할 것 같아서
There was a problem hiding this comment.
코드를 다시 살펴보니 필요 없을 것 같아 보이네!!!
짚어줘서 고마워
| const onChangePasswordConfirm = useCallback( | ||
| (e) => { | ||
| const passwordConfirmCurrent = e.target.value | ||
| if (password === passwordConfirmCurrent) { | ||
| console.log('✅비밀번호 일치✅'); | ||
| setIsPasswordConfirm(true) | ||
| } else { | ||
| console.log('🚨비밀번호 불일치🚨'); | ||
| setIsPasswordConfirm(false) | ||
| } | ||
| }, | ||
| [password] | ||
| ) |
There was a problem hiding this comment.
p2) useCallback을 감싸주는 것도 리소스가 들어가서 함수로직의 계산이 클 때만 사용해줘야하는걸로 알고 있어! 어떤 이유로 감싸줬는지 물어봐도 될까??
There was a problem hiding this comment.
이전 과제에서 사용하지 못한 게 아쉽기도 하고 비밀번호 확인할 때에 있어서 불필요한 렌더링을 줄이고 싶어서 한 번 사용해봤어!
여기선 사용하지 않는 게 좋을까?
There was a problem hiding this comment.
띠용
이이게 뭐지 수정하겠습니다!
| *Server State: 서버로부터 받아오는 state(e.g. 비동기 로직을 통해 세팅하는 state) | ||
| - redux에 server state를 같이 관리하게 되면서 store가 점점 비대해지고, 관심사의 분리가 어렵게 되는 문제들이 발생할 수 있다. | ||
| - 또한 DB에 있는 자료들을 프론트에서 렌더링하기 위해 임시적으로 redux store에 자료들을 보관하는 용도인데, 시간이 지날수록 실제 DB의 자료와 redux store에 보관된 자료들의 일관성이 깨질 수 있다. | ||
| -> 패칭 라이브러리가 데이터의 일관성 유지를 대신 수행해준다. | ||
|
|
||
| - 간편한 비동기 데이터 요청 | ||
| - 상태관리 및 업데이트 용이 | ||
| - 캐싱과 최적화 | ||
| - 로딩, 오류 처리 | ||
| - 서버사이드렌더링(SSR)과의 호환 | ||
|
|
There was a problem hiding this comment.
완전 핵심을 잘 공부했네 웹잼때 react query드가자~
🌱 기본 조건
.env파일 사용하기🧩 기본 과제
[ 로그인 페이지 ]
/mypage/:userId로 넘어갑니다. (여기서userId는 로그인 성공시 반환 받은 사용자의 id)/signup으로 이동합니다.[ 회원가입 페이지 ]
중복체크 버튼
회원가입 버튼
/login으로 이동합니다.[ 마이 페이지 ]
/mypage/:userId의 userId를 이용해 회원 정보를 조회합니다.🌠 심화 과제
[ 로그인 페이지 ]
createPortal을 이용합니다.[ 회원가입 페이지 ]
비밀번호 확인
중복체크
생각과제
💎 PR Point
🥺 소요 시간, 어려웠던 점
20hQ) 중복 체크 부분이나 버튼은 재사용성을 높이기 위해 따로 다른 파일로 빼는 게 좋을까요?
🌈 구현 결과물
회원가입(버튼)default.mov
회원가입,로그인default.mov
로그아웃(버튼)default.mov
토스트default.mov